<template>
    <view class="recommend">
        <u-scroll-list :indicator="false">
            <view class="f pv-14">
                <view
                    v-for="(item, index) in statusList"
                    :key="index"
                    class="h-64 ph-24 b-64 mr-16 f ai-c jc-c fs-26 text-color3 status"
                    :class="statusCurt == index ? 'active' : ''"
                    @click="changeStatus(index)"
                >
                    {{ item.categoryName }}
                </view>
            </view>
        </u-scroll-list>
        <view class="f jc-s-b">
            <view class="mr-16">
                <view v-for="(item, index) in listL" :key="index" class="w-335 b-24 ph-8 pt-8 pb-20 box mb-16" @click="toDetail(item)">
                    <image :src="item.img" class="w-319 b-24" mode="widthFix" v-show="item.urls" v-if="item.urls"></image>
                    <video
                        :src="item.videoUrl"
                        v-show="item.videoUrl"
                        class="w-319 b-24"
                        mode="widthFix"
                        object-fit="fill"
                        :controls="false"
                        :show-center-play-btn="false"
						v-if="item.videoUrl"
                    ></video>
                    <view class="fs-28 fw-600 mt-20 text-color4 text-ellipsis-2 ph-12">{{ item.title }}</view>
                    <view class="f ai-c jc-s-b mt-12 ph-12">
                        <view class="f f1 ai-c">
                            <image :src="item.avatar" class="w-40 h-40 mr-12 ava"></image>
                            <view class="f f1 text-ellipsis-1 fs-24 text-color2">{{ item.memberNickname }}</view>
                        </view>
                        <view class="f ai-c" :class="item.likeEnabled ? 'text-color' : 'text-color3'" @click.stop="handleZan(item, index, 'l')">
                            <image src="http://cwht.ricecs.cn/app/novice/zaned.png" v-if="item.likeEnabled" class="w-26 h-26 mr-12"></image>
                            <image src="http://cwht.ricecs.cn/app/novice/zan.png" v-else class="w-26 h-26 mr-12"></image>
                            <view class="fs-24">{{ item.likeCount }}</view>
                        </view>
                    </view>
                </view>
            </view>
            <view>
                <view v-for="(item, index) in listR" :key="index" class="w-335 b-24 ph-8 pt-8 pb-20 box mb-16" @click="toDetail(item)">
                    <image :src="item.img" class="w-319 b-24" mode="widthFix" v-show="item.urls" v-if="item.urls"></image>
                    <video
                        :src="item.videoUrl"
                        v-show="item.videoUrl"
                        class="w-319 b-24"
                        mode="widthFix"
                        object-fit="fill"
                        :controls="false"
                        :show-center-play-btn="false"
												v-if="item.videoUrl"
                    ></video>
                    <view class="fs-28 fw-600 mt-20 text-color4 text-ellipsis-2 ph-12">{{ item.title }}</view>
                    <view class="f ai-c jc-s-b mt-12 ph-12">
                        <view class="f f1 ai-c">
													<u-avatar :src="item.avatar" size="40rpx"></u-avatar>
                            <view class="f f1 text-ellipsis-1 fs-24 text-color2 ml-12">{{ item.memberNickname }}</view>
                        </view>
                        <view class="f ai-c ml-40 fs-28 fw-600 " :class="item.likeEnabled ? 'text-color' : 'text-color4'" @click.stop="handleZan(item, index, 'r')">
                            <image src="http://cwht.ricecs.cn/app/novice/zaned.png" v-if="item.likeEnabled" class="w-26 h-26 mr-12"></image>
                            <image src="http://cwht.ricecs.cn/app/novice/zan.png" v-else class="w-26 h-26 mr-12"></image>
                          {{item.likeCount||0}}
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { categoryList, listParentcodes } from '@/services/api/index/index';
import { contentPage, likeIncrese, likeDecrese } from '@/services/api/novice';
const statusList = ref([]);
const statusCurt = ref(0);
const listQuery = ref({
    pageNo: 1,
    pageSize: 10,
    secondCategoryCode: '',
});
const listL = ref<any>([]);
const listR = ref<any>([]);
getCategoryList();
//赞
async function handleZan(item: any, index: number, type: string) {
    if (!item.likeEnabled) {
        await likeIncrese({ id: item.id });
        if (type === 'l') {
            listL.value[index].likeCount = listL.value[index].likeCount + 1;
        } else {
            listR.value[index].likeCount = listR.value[index].likeCount + 1;
        }
    } else {
        await likeDecrese({ id: item.id });
        if (type === 'l') {
            listL.value[index].likeCount = listL.value[index].likeCount - 1;
        } else {
            listR.value[index].likeCount = listR.value[index].likeCount - 1;
        }
    }
    if (type === 'l') {
        listL.value[index].likeEnabled = !listL.value[index].likeEnabled;
    } else {
        listR.value[index].likeEnabled = !listR.value[index].likeEnabled;
    }
}
//详情
function toDetail(item: any) {
    if (item.urls) {
        uni.navigateTo({
            url: `/pages_novice/trendsDetail?id=${item.id}`,
        });
    } else {
        uni.navigateTo({
            url: `/pages_novice/videoDetail?id=${item.id}`,
        });
    }
}
//获取列表
async function getContentPage() {
    const { data } = await contentPage(listQuery.value);
    if (data.list.length > 0) {
        data.list.forEach((item: any, index: number) => {
            if (item.urls) {
                item.img = item.urls.split(',')[0];
            }

            if (index % 2 === 0) {
                listL.value.push(item);
            } else {
                listR.value.push(item);
            }
        });
    }
}
//获取一级分类
async function getCategoryList() {
    const { data } = await categoryList({ scope: 3, type: 2 });
    const parentCategoryCodes = data.map((item: any) => {
        return item.categoryCode;
    });
data.unshift({ categoryName: '全部' });
    statusList.value = data;
		getContentPage();
    // if(parentCategoryCodes.length>0){
    //   getListParentcodes(parentCategoryCodes);
    // }

}
//获取二级分类
async function getListParentcodes(parentCategoryCodes: any) {
    const { data } = await listParentcodes({ scope: 3, petType: 2, parentCategoryCodes: parentCategoryCodes });
    data.unshift({ categoryName: '全部' });
    statusList.value = data;
    getContentPage();
}
function onPullDownRefresh() {
    listQuery.value.pageNo = 1;
    listL.value = [];
    listR.value = [];
    getContentPage();
}
function onReachBottom() {
    listQuery.value.pageNo++;
    getContentPage();
}
const changeStatus = (data: number) => {
    statusCurt.value = data;
    listQuery.value.pageNo = 1;
    listQuery.value.secondCategoryCode = statusList.value[statusCurt.value].categoryCode;
    listL.value = [];
    listR.value = [];
    getContentPage();
};
defineExpose({ onPullDownRefresh, onReachBottom });
</script>
<style lang="scss" scoped>
.recommend {
    .status {
        flex-shrink: 0;
        background: #ffffff;
    }
    .active {
        background: #faf5e6;
        font-weight: 600;
        color: #fabb3c;
    }
    .box {
        background: #fff;
        .ava {
            border-radius: 50%;
        }
    }
}
</style>
